<template>
  <div>
    <div class="img-cutter-box" style="display: flex; flex-direction: row">
      <ImgCutter
        ref="imgCutterModal"
        v-on:cutDown="cutDownImg"
        :WatermarkText="''"
        :is-modal="true"
        :tool="false"
        :sizeChange="true"
        :boxWidth="700"
        :boxHeight="458"
        :cutWidth="470"
        :cutHeight="270"
        :originalGraph="true"
        style="padding: 10px"
        :value="temImgPath"
        :crossOrigin="true"
        crossOriginHeader="x-oss-request-id,x-oss-version-id"
      >
        <!-- :crossOrigin="true"
        crossOriginHeader="x-oss-request-id,x-oss-version-id" -->
        <template #choose>
          <div style="display: inline-flex; align-items: center">
            <el-button type="primary" plain>选择图片</el-button>
            <div class="f12 ml14">为了更精准的搜索，请重新上传图片精准裁剪，再进行图片搜索</div>
          </div>
        </template>
        <template #cancel><div></div></template>
        <template #confirm>
          <el-button type="primary" plain>确定</el-button>
        </template>
        <template #open>
          <span style="line-height: 100px; color: transparent"> / </span>
        </template>
      </ImgCutter>
    </div>
  </div>
</template>

<script setup>
import ImgCutter from "vue-img-cutter"; //引入vue-img-cutter
import { ref, watch, onMounted } from "vue";
import axios from "axios";

const emit = defineEmits(["getCoverImage"]); //与父组件事件通信
const props = defineProps({
  imgUrl: String
});
const temImgPath = ref("");
const imgCutterModal = ref();
watch(
  () => props.imgUrl,
  async (val, o) => {
    temImgPath.value = props.imgUrl;
    const base64Url = await imgTobase64(temImgPath.value); //把在线图片转移成本地的base64格式，供裁剪组件回显使用
    imgCutterModal.value.handleOpen({
      name: "封面图片",
      src: base64Url
    });
  }
);

const imgTobase64 = url => {
  return new Promise((resolve, reject) => {
    try {
      const img = document.createElement("img");
      img.style.display = "none";
      img.src = url + "?_t=" + new Date().getTime();
      img.crossOrigin = "Anonymous";
      img.onload = function () {
        let canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        resolve(canvas.toDataURL("image/png"));
      };
    } catch (err) {
      reject(new Error(err));
    }
  });
};

// 图片裁剪点击确认后触发
function cutDownImg(option) {
  emit("getCoverImage", option);
  //向后端发送请求等
  // 请求成功时，emit("getCoverImage")，让父组件再次获取刚修改的新图片
}
</script>

<style lang="scss" scoped>
.img-cutter-box {
  width: 100%;
  height: 100%;
  & > div {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    cursor: pointer;
  }
}
.remove-btn-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  text-align: center;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.ant-upload:hover .remove-btn-wrap {
  display: flex;
}

:deep(.ant-upload) {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
  }
}
:deep(.copyright a[data-v-391393b9]) {
  display: none !important;
}
</style>
